@use 'sass:map';

@use '../shared/variables.scss' as *;
@use './variables.scss' as *;

:root.dark,
.#{$namespace}-theme-vars-dark {
  color-scheme: dark;

  @include define-theme-styles(
    (
      'content-color-map': $content-color-map,
      'bg-color-map': $bg-color-map,
      'border-color-map': $border-color-map,
      'fill-color-map': $fill-color-map,
      'shadow-color-map': $shadow-color-map
    )
  );

  .#{$namespace}-button-vars {
    @include define-preset-values(
      'button',
      (
        pulse-size: 8px,
        pulse-opacity: 90%
      )
    );
  }

  .#{$namespace}-captcha-vars {
    @include define-preset-values(
      'captcha',
      (
        trigger-color: #868e96,
        trigger-color-disabled: #adb5bd
      )
    );
  }

  .#{$namespace}-checkbox-vars {
    @include define-preset-values(
      'checkbox',
      (
        signal-bg-color-disabled: get-css-var('fill-color-hover')
      )
    );
  }

  .#{$namespace}-menu-vars {
    @include define-preset-values(
      'menu',
      (
        label-color-dark: #495057,
        label-color-hover-dark: get-css-var('color-primary-base'),
        label-color-visible-dark: get-css-var('color-white'),
        label-color-disabled-dark: #adb5bd
      )
    );
  }

  .#{$namespace}-slider {
    @include define-preset-values(
      'slider',
      (
        handler-b-color-disabled: rgba(0, 0, 0, 0.4)
      )
    );
  }
}
